<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>预约服务</title>
    <link rel="stylesheet" href="../src/css/weui.css">
    <script src="../src/js/libs/jquery-3.0.0.min.js"></script>
    <script src="../src/js/main.js"></script>
    <style>
        /* 顶部样式 */
        .weui_panel_bd.state{
           background-color: #000;
            color: #FFFFff;
            text-align: center;
        }
        .weui_panel_bd.state .weui_media_title{
            color: #cacaca;
            font-size: 1rem;
        }
        .weui_panel_bd.state .weui_media_desc{
            font-size: 3rem;
            color: #FFFFff;
        }

        /* 待处理 */
        .waiting .weui_media_ft{
            color: red;
        }
        /* 已处理 */
         .dealed .weui_media_ft{
             color: #10AEFF;
         }
        /* 已完成 */
        .completed .weui_media_ft{
            color: #04bd00;
        }
        /* 已过期 */
        .failed .weui_media_ft{
            color: #A1A1A1;
        }
    </style>
</head>
<body ontouchstart>
<div class="weui_panel_bd state">
    <div  class="weui_media_box weui_media_appmsg">
        <div class="weui_media_bd">
            <h4 class="weui_media_title">待处理</h4>
            <p class="weui_media_desc">15</p>
        </div>
        <div class="weui_media_bd">
                <h4 class="weui_media_title">已处理</h4>
                <p class="weui_media_desc">32</p>
        </div>
    </div>
</div>


<div class="container" id="container"><div class="navbar">
    <div class="bd" style="height: 100%;">
        <div class="weui_tab">
            <div class="weui_navbar">
                <div class="weui_navbar_item weui_bar_item_on">
                    待处理
                </div>
                <div class="weui_navbar_item">
                   已处理
                </div>
                <div class="weui_navbar_item">
                    已完成
                </div>
                <div class="weui_navbar_item">
                    已过期
                </div>
            </div>
            <div class="weui_tab_bd">
                <div class="weui_tab_bd_item waiting" style="display: block">
                    <div class="weui_panel weui_panel_access">
                        <div class="weui_panel_bd">
                            <a href="appointment-detail.html" class="weui_media_box weui_media_appmsg">
                                <div class="weui_media_hd">
                                    <img class="weui_media_appmsg_thumb" src="" alt="">
                                </div>
                                <div class="weui_media_bd">
                                    <h4 class="weui_media_title waiting">空调保养</h4>
                                    <p class="weui_media_desc">王先生-18888888888</p>
                                </div>
                                <div class="weui_media_ft">
                                    <h4 class="weui_media_title">2016-07-09</h4>
                                </div>
                            </a>
                        </div>
                        <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
                <div class="weui_tab_bd_item dealed" style="display: none">
                    <div class="weui_panel weui_panel_access">
                        <div class="weui_panel_bd">
                            <a href="appointment-wait.html" class="weui_media_box weui_media_appmsg">
                                <div class="weui_media_hd">
                                    <img class="weui_media_appmsg_thumb" src="" alt="">
                                </div>
                                <div class="weui_media_bd">
                                    <h4 class="weui_media_title waiting">空调保养</h4>
                                    <p class="weui_media_desc">王先生-18888888888</p>
                                </div>
                                <div class="weui_media_ft">
                                    <h4 class="weui_media_title">2016-07-09</h4>
                                </div>
                            </a>
                        </div>
                        <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
                <div class="weui_tab_bd_item completed" style="display: none">
                    <div class="weui_panel weui_panel_access">
                        <div class="weui_panel_bd">
                            <a href="apointment-success.html" class="weui_media_box weui_media_appmsg">
                                <div class="weui_media_hd">
                                    <img class="weui_media_appmsg_thumb" src="" alt="">
                                </div>
                                <div class="weui_media_bd">
                                    <h4 class="weui_media_title waiting">空调保养</h4>
                                    <p class="weui_media_desc">王先生-18888888888</p>
                                </div>
                                <div class="weui_media_ft">
                                    <h4 class="weui_media_title">2016-07-09</h4>
                                </div>
                            </a>
                        </div>
                        <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
                <div class="weui_tab_bd_item failed" style="display: none">
                    <div class="weui_panel weui_panel_access">
                        <div class="weui_panel_bd">
                            <a href="appointment-failed.html" class="weui_media_box weui_media_appmsg">
                                <div class="weui_media_hd">
                                    <img class="weui_media_appmsg_thumb" src="" alt="">
                                </div>
                                <div class="weui_media_bd">
                                    <h4 class="weui_media_title waiting">空调保养</h4>
                                    <p class="weui_media_desc">王先生-18888888888</p>
                                </div>
                                <div class="weui_media_ft">
                                    <h4 class="weui_media_title">2016-07-09</h4>
                                </div>
                            </a>
                        </div>
                        <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>